<template>
	<view class="container">
		<view class="address-list">
			<view class="a-address" v-for="(item,index) in addressList" :key="index">
				<view class="left-text" @tap="selectTap(index)">
					<uni-icons :color="item.is_default ? '#fa3534' : '#ffffff'" type="checkmarkempty" size="30">
					</uni-icons>
					<view>
						<view class="name-tel">
							{{item.name}} {{item.mobile}}
						</view>
						<view class="address-box">
							{{item.address || item.full_address}}
						</view>
					</view>
				</view>
				<uni-icons @tap="editAddess(index)" type="compose" size="30"></uni-icons>
				<uni-icons @tap="delAddess(index)" color="#fa3534" type="trash" size="30"></uni-icons>
			</view>
		</view>
		<view class="bottom-box">
			<view class="add-btn" @tap="addAddess">
				<uni-icons type="plus-filled" color="#fa3534" size="30"></uni-icons>
				<text>新增收货地址</text>
			</view>
			<uni-icons type="forward" color="#ccc" size="30"></uni-icons>
		</view>
		<uni-popup ref="popupAddAddress" type="bottom">
			<view class="add-address">
				<view class="add-address-title"><text>新增收货地址</text></view>
				<uni-forms :modelValue="formData">
					<uni-forms-item required label="姓名" name="name">
						<input class="add-address-input" type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item required label="手机" name="mobile">
						<input class="add-address-input" maxlength="11" type="number" v-model="formData.mobile"
							placeholder="请输入电话号码" />
					</uni-forms-item>
					<uni-forms-item label="固定电话" name="telephone">
						<input class="add-address-input" type="text" v-model="formData.telephone"
							placeholder="座机号码(选填)" />
					</uni-forms-item>

					<uni-forms-item required label="地区" name="ssq">
						<input class="add-address-input" type="text" @click="openCitySelect" v-model="formData.ssq"
							placeholder="请选择地址" />
					</uni-forms-item>

					<uni-forms-item required label="详细地址" name="full_address">
						<input class="add-address-input" type="text" v-model="formData.full_address"
							placeholder="详细地址" />
					</uni-forms-item>


				</uni-forms>
				<button type="primary" @click="submitForm">保存</button>
			</view>
		</uni-popup>
		<regionWindow ref="citySelect" @finish="citySelectFinish"></regionWindow>

	</view>
</template>

<script>
	import regionWindow from '@/components/region-window/index.vue'
	const defaultForm = {
		name: '',
		mobile: '',
		telephone: '',
		province_id: '',
		ssq: '',
		city_id: '',
		district_id: '',
		community_id: '',
		address: '',
		full_address: '',
		longitude: '',
		latitude: '',
		is_default: '',
	};

	export default {
		components: {
			regionWindow
		},
		data() {
			return {
				addressList: [],
				formData: {
					name: '',
					mobile: '',
					telephone: '',
					province_id: '',
					ssq: '',
					city_id: '',
					district_id: '',
					community_id: '',
					address: '',
					full_address: '',
					longitude: '',
					latitude: '',
					is_default: '',
				},
			}
		},
		onLoad() {
			this.getAddress();
		},
		methods: {
			openCitySelect() {
				this.$refs.citySelect.open();
			},
			citySelectFinish(res) {
				let province = res.province.name;
				let city = res.city.name;
				let district = res.district.name ? res.district.name : '';
				let nation = res.street ? res.street.name : '';
				this.formData.ssq = province + ' ' + city + ' ' + district + ' ' + nation;

				this.formData.province_id = res.province.city_id;
				this.formData.city_id = res.city.city_id;
				this.formData.district_id = res.district.city_id;
				this.formData.community_id = res.street && res.street.city_id ? res.street.city_id : 0;
			},
			checkFormField(field, msg) {
				if (!this.formData[field]) {
					uni.showToast({
						icon: 'none',
						title: msg
					})
					return false;
				}
				return true;
			},
			submitForm() {
				this.formData.address = this.formData.full_address;

				if (this.checkFormField('name', '请输入姓名') === false) return;
				if (this.checkFormField('mobile', '请输入手机号码') === false) return;
				if (this.checkFormField('city_id', '请选择地区') === false) return;
				if (this.checkFormField('full_address', '请输入详细地址') === false) return;
				if (this.formData['mobile'].length !== 11 || this.formData['mobile'].substr(0, 1) != 1) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return;
				}


				this.getLocation((pos) => {
					this.formData.longitude = pos.longitude
					this.formData.latitude = pos.latitude

					let url = (this.formData.id && this.formData.id > 0) ? '/api/member_address/edit' :
						'/api/member_address/add'
					this.$api.sendRequest({
						url: url,
						data: this.formData,
						success: res => {
							this.$refs.popupAddAddress.close(() => {

							});
							uni.showToast({
								title: '添加成功'
							})
							this.getAddress();
							this.formData = JSON.parse(JSON.stringify(defaultForm));
						}
					})

				})

			},
			getLocation(call) {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res)
						call(res);
					},
					fail: () => {
						this.$api.sendRequest({
							url: '/api/address/ipLocation',
							success: res => {
								if (res.code !== 0) return;
								console.log(res.data.location)
								call({
									latitude: res.data.location.lat,
									longitude: res.data.location.lng
								});
							}
						})
					}
				});
			},
			getAddress() {
				this.$api.sendRequest({
					url: '/api/member_address/page',
					success: res => {
						console.log(res)
						if (res.code !== 0) return;
						this.addressList = res.data.list
					}
				});
			},
			selectTap(index) {
				this.$api.sendRequest({
					url: '/api/member_address/setdefault',
					data: {
						id: this.addressList[index].id
					},
					success: res => {
						if (res.code !== 0) return;
						for (var i = 0; i < this.addressList.length; i++) {
							let item = this.addressList[i]
							item.is_default = false;
						}
						this.addressList[index].is_default = true;
					}
				});

			},
			editAddess(index) {
				this.formData = this.addressList[index];

				let province = this.formData.province_name;
				let city = this.formData.city_name;
				let district = this.formData.district_name;
				let nation = this.formData.community_name ? this.formData.community_name : '';
				this.formData.ssq = province + ' ' + city + ' ' + district + ' ' + nation;

				this.$refs.popupAddAddress.open();
			},
			addAddess() {
				this.$refs.popupAddAddress.open();
			},
			delAddess(index) {
				uni.showModal({
					title: '删除提示',
					content: '您确定要删除吗？',
					confirmText: '删除',
					confirmColor: '#fa3534',
					success: (res) => {
						if (res.confirm) {
							this.$api.sendRequest({
								url: '/api/member_address/delete',
								data: {
									id: this.addressList[index].id
								},
								success: res => {
									this.getAddress();
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.add-address {
		padding: 30rpx 30rpx 60rpx 30rpx;
	}

	.add-address-input {
		margin-top: 15rpx;
	}

	.add-address-title {
		font-size: 32rpx;
		font-weight: 900;
		text-align: center;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.container {
		background-color: #F2f2f2;
	}

	.address-list {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		padding-bottom: 100rpx;
	}

	.address-list .a-address {
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.a-address .left-text {
		display: flex;
		flex-direction: row;
		width: 610rpx;
	}

	.a-address .left-text .name-tel {
		margin-bottom: 20rpx;
	}

	.a-address .left-text .address-box {
		font-size: 24rpx;
		color: #888888;
		line-height: 36rpx;
	}



	.bottom-box {
		position: fixed;
		width: 690rpx;
		bottom: 0;
		font-size: 28rpx;
		color: #000000;
		border-top: 1rpx solid #eee;
		height: 100rpx;
		line-height: 100rpx;
		background-size: 15rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.bottom-box .add-btn {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-size: 40rpx auto;
	}
</style>
